<template>
  <div>
    <h1>{{ n }}</h1>
    <h1>{{ tip }}</h1>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, onUpdated, ref } from "vue";

const n = ref(1);
const tip = ref("奇数");
let timer = null;

const autoPlay = () => {
  timer = setInterval(() => {
    n.value++;
  }, 1000);
};
onMounted(() => {
  autoPlay();
});

onUpdated(() => {
  tip.value = n % 2 === 0 ? "偶数" : "奇数";
});

onUnmounted(() => {
  timer && clearInterval(timer);
});
</script>

<style scoped></style>
